<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-08-08 16:48:22
 * @LastEditTime: 2024-08-08 17:45:34
 * @FilePath: src/views/sys/dict/DictOptionTable.vue
 * @Description: 
 -->
<script setup lang="ts">
import {onMounted,h, ref} from 'vue'
import {SearchOutlined, CiCircleFilled, PlusOutlined} from '@ant-design/icons-vue'
import {useOptionTable} from './DictHooks'
import DictOptionForm from "@/views/sys/dict/DictOptionForm.vue";
import {useRoute} from "vue-router";
const {
  params,
  columns,
  dataSource,
  pagination,
  handleTableChange,
  query,
  reset,
  deleteSingle,
} = useOptionTable()
const route = useRoute()

const forceParamsQuery = ()=>{
  params.dictId = route.params.dictId
  query()
}
onMounted(() => {
  forceParamsQuery()
})

//modal
const formModal = ref()
</script>

<template>
  <div class="query-handle-panel">
    <a-form layout="inline" class="query-form">
      <a-form-item label="名称">
        <a-input placeholder="请输入" allow-clear v-model:value="params.label"/>
      </a-form-item>
      <a-form-item label="值">
        <a-input placeholder="请输入值" allow-clear v-model:value="params.val"/>
      </a-form-item>
      <a-form-item>
        <a-button type="default" @click="forceParamsQuery" :icon="h(SearchOutlined)">查询</a-button>
      </a-form-item>
      <a-form-item>
<!--        <a-button type="primary" style="background-color: orange" @click="reset" :icon="h(CiCircleFilled)">重置-->
<!--        </a-button>-->
      </a-form-item>
      <a-form-item>
        <a-button type="primary" :icon="h(PlusOutlined)" @click="formModal.customShowAddForm()">录入</a-button>
      </a-form-item>


    </a-form>
    <!--    <a-row class="handle-bar">-->

    <!--            <a-button type="primary" style="background-color: orange" @click="formModal.openEdit('nihao')">修改</a-button>-->
    <!--    </a-row>-->
  </div>
  <a-table class="table-container" bordered
           :data-source="dataSource"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange"
  >
    <template #bodyCell="{column, text,record}">
      <template v-if="column.dataIndex === 'operate'">
        <a-button type="link" @click="formModal.customShowEditForm(record.optionId)">修改</a-button>
        <a-button type="link" @click="deleteSingle(record.optionId)" danger>删除</a-button>
      </template>
    </template>
  </a-table>
  <dict-option-form ref="formModal" @submit-callback="forceParamsQuery"/>
</template>

<style scoped>

</style>